<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>飞马云播-多旋翼</title>
    <link rel="stylesheet" type="text/css" href="/css/vendor/cmp-controls.css">
    <link rel="stylesheet/less" type="text/css" href="/css/vendor/cloud-play-mobile-wing.less">
    <script src="/js/less.min.js"></script>

</head>
<body bgcolor="#828997">

{#<div style="position: fixed; top: 63px; left: 0px; right: 0px; bottom: 0px;">#}
    {#<div id="map-container" style="position: relative; width: 100%; height: 100%;"></div>#}
{#</div>#}
<!-- 地图 -->
<div id="map-widget" class="map-widget-full">
    <div id="map-container" class="map-wrap"></div>
    <div id="map-status-bar" class="map-status-bar">
        <div id="map-full-screen-icon"></div>
        <div class="coor" id="map-coor"></div>
    </div>
</div>

<!-- 飞行信息 -->
<div class="flight-data-container">
    <div class="flight-data-0-container">

        <div class="flight-data">
            <img style="position: absolute; left: 154px; top: 34px; max-width: 38px;max-height: 38px;"
                 src="/images/cloudplay/mobile_asset/drone_to_pilot_distance.png"/>
            <section style="position: absolute; left: 204px; top: 40px; line-height: 30px; font-size: 1.4em;"><span
                        id="drone-pilot-distance">0km</span>
            </section>
            <section style="position: absolute; left: 154px; top: 80px; line-height: 30px; font-size: 0.9em;">纬度:<span
                        id="drone-position-lat" style="margin-left: 10px;">0.00000</span></section>
            <section style="position: absolute; left: 154px; top: 104px; line-height: 30px; font-size: 0.9em;">经度:<span
                        id="drone-position-lon" style="margin-left: 10px;">0.00000</span></section>
        </div>

        <div class="flight-data-0-border-container">
            <img class="round-border-left-top" src="/images/cloudplay/mobile_asset/round_border.png"> <img
                    class="round-border-right-top"
                    src="/images/cloudplay/mobile_asset/round_border.png">
            <img class="round-border-left-bottom" src="/images/cloudplay/mobile_asset/round_border.png"> <img
                    class="round-border-right-bottom"
                    src="/images/cloudplay/mobile_asset/round_border.png">

            <div class="attitude-plate-container">
                <div class="attitude-plate">
                    <img src="/images/cloudplay/mobile_asset/attitude_plate.png"/>
                    {#<img class="attitude-north-icon" src="/images/cloudplay/mobile_asset/north_icon.png"/>#}
                </div>
            </div>
            <div class="attitude-plate-container">
                <div class="attitude-plate">
                    <img id="attitude-direction" style="position: relative; right: 1px;" src="/images/cloudplay/mobile_asset/attitude_direction.png"/>
                </div>
            </div>
            {#<div class="attitude-plate-container">#}
                {#<div class="attitude-plate">#}
                    {#<img id="attitude-drone" style="position: relative; right: 1px;" src="/images/cloudplay/mobile_asset/attitude_drone.png"/>#}
                {#</div>#}
            {#</div>#}
        </div>
    </div>

    <div class="flight-data-1-container">
        <div class="flight-data" style="font-size: 1.0em;">
            <section style="position: absolute; left: 12px; top: 8px;">目标速度<span id="target-speed"
                                                                                 style="margin-left: 22px;"></span>m/s
            </section>
            <section style="position: absolute; left: 12px; top: 37px; font-size: 1.5em; color: rgb(0, 177, 147);">
                速度<span id="drone-speed" style="font-size: 1.1em; margin-left: 40px;">0</span>
            </section>
            <section style="position: absolute; left: 12px; bottom: 37px; font-size: 1.5em; color: rgb(0, 128, 200);">
                高度<span id="drone-height" style="font-size: 1.1em; margin-left: 40px;">0</span>
            </section>
            <section style="position: absolute; left: 12px; bottom: 8px;">目标高度<span id="target-height"
                                                                                    style="margin-left: 22px;">0</span>m
            </section>
        </div>
        <div class="flight-data-1-border-container">
            <img class="round-border-left-top" src="/images/cloudplay/mobile_asset/round_border.png"> <img
                    class="round-border-right-top"
                    src="/images/cloudplay/mobile_asset/round_border.png">
            <img class="round-border-left-bottom" src="/images/cloudplay/mobile_asset/round_border.png"> <img
                    class="round-border-right-bottom"
                    src="/images/cloudplay/mobile_asset/round_border.png">
        </div>
    </div>

    <div class="flight-data-1-container">
        <div class="flight-data">
            <ul style="list-style-type: none; padding: 0 0 0 16px; margin:0px; font-size: 1.1em; letter-spacing: 2px;">
                <li style="margin: 6px 0px 0px 0px;"><span id="wing-speed" style="margin-left: 16px;"></span></li>
                <li style="margin: 4px 0px 0px 0px;">里程<span id="flight-miles" style="margin-left: 16px;">0</span>km
                </li>
                <li style="margin: 4px 0px 0px 0px;">航时<span id="flight-duration"
                                                             style="margin-left: 16px;">00:00</span></li>
                <li style="margin: 4px 0px 0px 0px;">航点<span id="finished-point-count"
                                                             style="margin-left: 16px;">0</span>/<span
                            id="total-point-count">00</span></li>
                <li style="margin: 4px 0px 0px 0px;">照片<span id="photo-count" style="margin-left: 16px;">0</span></li>
            </ul>
        </div>
        <div class="flight-data-1-border-container">
            <img class="round-border-left-top" src="/images/cloudplay/mobile_asset/round_border.png"> <img
                    class="round-border-right-top"
                    src="/images/cloudplay/mobile_asset/round_border.png">
            <img class="round-border-left-bottom" src="/images/cloudplay/mobile_asset/round_border.png"> <img
                    class="round-border-right-bottom"
                    src="/images/cloudplay/mobile_asset/round_border.png">
        </div>
    </div>
</div>

<!-- 详细任务信息 -->
<div id="mission-info-container">
    <section class="mission-info-title">任务信息</section>
    <section class="mission-info-subtitle">用户信息</section>
    <div class="mission-info-user">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">用户昵称</li>
            <li class="mission-info-li">用户手机号</li>
        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><?= $flightMission['nickname'] ?></li>
            <li class="mission-info-li"><span><?= $flightMission['phone'] ?></span></li>
        </ul>
    </div>
    <section class="mission-info-subtitle"><?= $flightMission['survey_area_name'] ?></section>
    <div class="mission-info-project">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">飞机型号</li>
            <li class="mission-info-li">相机类型</li>
            <li class="mission-info-li">GSD</li>
            <li class="mission-info-li">航向重叠</li>
            <li class="mission-info-li">海拔高度</li>
            <li class="mission-info-li">航线间距</li>
            <li class="mission-info-li">默认空速</li>
            <li class="mission-info-li">预计面积</li>
        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><span id="info-drone-type"></span></li>
            <li class="mission-info-li"><span id="info-camera-type"><?= $flightMission['camera_type'] ?></span></li>
            <li class="mission-info-li"><span id="info-gsd"><?= $flightMission['average_ground_resolution'] ?></span>cm
            </li>
            <li class="mission-info-li"><span
                        id="info-heading-overlap"><?= $flightMission['longitudinal_overlap'] ?></span>%
            </li>
            <li class="mission-info-li"><span id="info-altitude"><?= $flightMission['flight_altitude'] ?></span>m</li>
            <li class="mission-info-li"><span id="info-route-spacing"><?= $flightMission['flight_interval'] ?></span>m
            </li>
            <li class="mission-info-li"><span
                        id="info-default-air-speed"><?= $flightMission['default_air_speed'] ?></span>m/s
            </li>
            <li class="mission-info-li"><span id="info-estimated-area"><?= $flightMission['work_area'] ?></span>km&sup2;
            </li>
        </ul>
        <ul class="mission-info-right-name-list">
            <li class="mission-info-li">比例尺</li>
            <li class="mission-info-li">旁向重叠</li>
            <li class="mission-info-li">飞行高度</li>
            <li class="mission-info-li">拍照间距</li>
            <li class="mission-info-li">预计时间</li>
            <li class="mission-info-li">预计里程</li>
        </ul>
        <ul class="mission-info-right-value-list">
            <li class="mission-info-li"><span id="info-scale"><?= $flightMission['work_scale'] ?></span></li>
            <li class="mission-info-li"><span id="info-side-overlap"><?= $flightMission['lateral_overlap'] ?>%</span>
            </li>
            <li class="mission-info-li"><span
                        id="info-flight-height"><?= $flightMission['flight_relative_altitude'] ?></span>m
            </li>
            <li class="mission-info-li"><span id="info-photo-spacing"><?= $flightMission['take_pic_interval'] ?></span>m
            </li>
            <li class="mission-info-li"><span id="info-estimated-duration"><?= $flightMission['work_time'] ?></span>min
            </li>
            <li class="mission-info-li"><span
                        id="info-estimated-miles"><?php echo number_format($taskInfo['total_mileage'],1) ?></span>km
            </li>
        </ul>
    </div>
    <section class="mission-info-subtitle">飞行信息</section>
    <div class="mission-info-flight">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">飞行日期</li>
            <li class="mission-info-li">开始时间</li>
            <li class="mission-info-li">结束时间</li>
            <li class="mission-info-li">实际用时</li>
            <li class="mission-info-li">航线起点</li>
            <li class="mission-info-li">降落位置</li>
            {#<li class="mission-info-li">降落方式</li>#}
            <li class="mission-info-li">实际拍照</li>
            <li class="mission-info-li">实际飞行</li>
        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><span
                        id="info-mission-date"><?= date('Y-m-d', strtotime($flightMission['created_at'])) ?></span></li>
            <li class="mission-info-li"><span
                        id="info-mission-begin-time"><?= date('H:i:s', strtotime($uasInfo[0]['created_at'])) ?></span>
            </li>
            <li class="mission-info-li"><span
                        id="info-mission-end-time"><?= isset($uasInfo[1]) ? date('H:i:s', strtotime($uasInfo[1]['created_at'])) : '------'; ?></span>
            </li>
            <li class="mission-info-li"><span id="info-mission-practical-time"><?php
                    if (isset($uasInfo[1])) {
                        $times = strtotime($uasInfo[1]['created_at']) - strtotime($uasInfo[0]['created_at']);

                        $h = floor($times / 3600);
                        $times = $times % 3600;
                        $i = floor($times / 60);
                        $s = $times % 60;

                        $h = $h < 0 ? "0" . $h : $h;
                        $i = $i < 0 ? "0" . $i : $i;
                        $s = $s < 0 ? "0" . $s : $s;

                        echo "$h:$i:$s";
                    } else {
                        echo '------';
                    }
                    ?></span>min
            </li>
            <li class="mission-info-li"><span
                        id="info-mission-start-position-lat"><?= $flightMission['home_lng'] ?></span>, <span
                        id="info-mission-start-position-lon"><?= $flightMission['home_lat'] ?></span></li>
            <li class="mission-info-li"><span
                        id="info-mission-landing-position-lat"><?= $flightMission['home_lng'] ?></span>, <span
                        id="info-mission-landing-position-lon"><?= $flightMission['home_lat'] ?></span></li>
            {#<li class="mission-info-li"><span#}
                        {#id="info-landing-type"><?= $flightMission['landing_method'] == 0 ? '伞降' : '滑降' ?></span></li>#}
            <li class="mission-info-li"><span
                        id="info-practical-photos"><?= empty($taskInfo['photo_count']) ? '------' : $taskInfo['photo_count']; ?></span>张
            </li>
            <li class="mission-info-li"><span id="info-practical-miles"><?php
                    if (isset($uasInfo[1])) {
                        echo($uasInfo[1]['uas_odometer_value'] - $uasInfo[0]['uas_odometer_value']);
                    } else {
                        echo '------';
                    }
                    ?></span>km
            </li>
        </ul>
    </div>
    <section class="mission-info-subtitle">飞机信息</section>
    <div class="mission-info-drone">
        <ul class="mission-info-left-name-list">
            <li class="mission-info-li">飞机编号</li>
             <li class="mission-info-li">持有单位</li>
            <li class="mission-info-li">累计飞行</li>
            <li class="mission-info-li">钥匙编号</li>
            <li class="mission-info-li">钥匙有效期</li>
        </ul>
        <ul class="mission-info-left-value-list">
            <li class="mission-info-li"><span
                        id="info-drone-sn"><?= empty($planeInfo) ? '------' : $planeInfo['uas_serial_id'] ?></span></li>
            <li class="mission-info-li"><span><?= $planeInfo['name'] ?>&nbsp;</span></li>
            <li class="mission-info-li"><span
                        id="info-total-flight-miles"><?= $lastUas['uas_odometer_value'] ?></span>km
            </li>
            <li class="mission-info-li"><span
                        id="info-key-sn"><?= empty($keyInfo) ? '------' : $keyInfo['key_id'] ?></span></li>
            <li class="mission-info-li"><span id="info-key-valid-period"><?php if (!empty($plane)) {
                        echo $plane['type'] == 0 ? '永久' : $plane['expired_at'];
                    } else {
                        echo '------';
                    }
                    ?></span></li>
        </ul>
    </div>
</div>

<!-- 顶部状态栏 -->
<div class="status-bar">
    <img onClick="clickMoreMissionInfo(this)" style="float: left; margin-left: 64px; max-height: 74px; min-width: 74px;"
         src="/images/cloudplay/mobile_asset/multi_rotor.png">
    <section id="drone-type">未知</section>

    <ol class="status-list">
        <li id="drone-mode-icon" class="status-li-right" style="width: 70px;"><img class="status-icon"
                                                              src="/images/cloudplay/mobile_asset/mode.png"/></li>
        <li id="drone-mode" class="status-li-left statis-li-text-offset" style="margin-right: 35px; font-size: 1.0em;">
            WP
        </li>
        <li class="status-li-right"><img id="gps-status-icon" class="status-icon"
                                         src="/images/cloudplay/mobile_asset/gps_normal.png"/></li>
        <li class="status-li-left">
            <img id="gps-signal-icon" class="status-icon" src="/images/cloudplay/mobile_asset/signal_5.png"/>
            <div id="gps-signal-sup" class="status-signal-sup">0</div>
        </li>
        <li id="drone-remote-control" class="status-li-right"><img id="remote-status-icon" class="status-icon"
                                         src="/images/cloudplay/mobile_asset/remote_normal.png"/>
        </li>
        <li id="drone-remote-control-signal" class="status-li-left"><img id="remote-signal-icon" class="status-icon"
                                        src="/images/cloudplay/mobile_asset/signal_5.png"/></li>
        <li class="status-li-right"><img id="hd-status-icon" class="status-icon"
                                         src="/images/cloudplay/mobile_asset/hd_normal.png"
                                         style="padding-top: 5px;"/></li>
        <li class="status-li-left">
            <img id="hd-signal-icon" class="status-icon" src="/images/cloudplay/mobile_asset/signal_5.png"/>
            <div id="hd-signal-sup" class="status-signal-sup">2.4G</div>
        </li>
        <li class="status-li-right"><img id="drone-battery-status-icon" class="status-icon"
                                         src="/images/cloudplay/mobile_asset/drone_battery_normal.png"/></li>
        <li id="drone-battery-percent" class="status-li-left statis-li-text-offset"
            style="padding-left: 4px; margin-right: 17px;">0%
        </li>
        <li id="ipad-battery-percent-icon" class="status-li-right"><img id="ipad-battery-status-icon" class="status-icon"
                                         src="/images/cloudplay/mobile_asset/ipad_battery_normal.png"/></li>
        <li id="ipad-battery-percent" class="status-li-left statis-li-text-offset" style="padding-left: 4px;">0%</li>
    </ol>
    <div class="widget-controller-center">
        <div id="controller-btn" class="widget-controller"></div>
    </div>
    <section id="mission-name"><?= $flightMission['survey_area_name'] ?></section>
</div>

<!-- 控件菜单 -->
<div id="widget-menu" class="widget-menu" style="display: none;">
    <div id="data-recorder-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box"></div>
            <div class="des">数据记录器</div>
        </div>
    </div>
    <div id="dashboard-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box" checked></div>
            <div class="des">仪表盘</div>
        </div>
    </div>
    <div id="flight-data-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box" checked></div>
            <div class="des">飞行数据</div>
        </div>
    </div>
    <div id="live-player-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box"></div>
            <div class="des">直播</div>
        </div>
    </div>
    <div id="map-btw-wrap" class="widget-menu-button">
        <div class="menu-wrap">
            <div class="check-box" checked></div>
            <div class="des">地图</div>
        </div>
    </div>
</div>

<!-- 飞行提示 -->
<div id="flight-tip" style="visibility: hidden">
    <div id="flight-tip-icon-container">
        <div class="flight-tip-icon-hv-center">
            <img id="flight-tip-icon" src="/images/cloudplay/mobile_asset/ipad_battery_tip.png"/>
        </div>
    </div>

    <section id="flght-tip-content">iPad电量不足</section>
</div>

<!-- 播放工具条 -->
<div class="play-bar-container">
    <div class="play-bar">
        <img id="play-or-pause-button" src="/images/cloudplay/mobile_asset/play_button.png"
             onClick="clickPlayOrPause(this)"/>

        <div id="play-progress-container">
            <div class="play-progress-line"></div>
            <div style="width: 100%; height: 100%; position: absolute;">
                <div id="play-progress-track">
                    <section id="play-progress-cursor" onMouseDown="_progressLabelIgnoreMouseDown(event)">100:02:13
                    </section>
                </div>
                <div id="play-progress-thumb"></div>
            </div>
            <section id="play-progress-duration" onMouseDown="_progressLabelIgnoreMouseDown(event)">100:03:32</section>
        </div>
    </div>
</div>

<!-- 右边按钮列表 -->
<ol class="right-control-list" style="visibility: hidden;">
    <li><img onClick="clickRuler()" src="/images/cloudplay/mobile_asset/ruler.png"/></li>
    <li class="right-control-group-header"><img onClick="setTestAreaToCenter()"
                                                src="/images/cloudplay/mobile_asset/test_area_center.png"/></li>
    <li class="right-control-item"><img onClick="setDroneToCenter()"
                                        src="/images/cloudplay/mobile_asset/drone_center.png"/></li>
    <li class="right-control-item"><img onClick="setLandingPositionToCenter()"
                                        src="/images/cloudplay/mobile_asset/landing_center.png"/></li>
    <li class="right-control-group-header"><img onClick="setPhotoingPositionToCenter()"
                                                src="/images/cloudplay/mobile_asset/photoing_position.png"/></li>
    <li class="right-control-item"><img onClick="toggleVoiceBroadcast(this)"
                                        src="/images/cloudplay/mobile_asset/voice_broadcast.png"/></li>
</ol>

<!-- 二维码按钮 -->
<div class="qrcode-btn" onClick="clickQrcodeBtn()"></div>

<div class="original-data" style="display: none">

<div style="display: none">


    <ul id="packages">
        <?php foreach ($packages as $package): ?>
        <li><?php echo $package ?></li>
        <?php endforeach; ?>
    </ul>
    <div id="endTime">
        <?php echo $endTime ?>
    </div>
    <div id="startTime">
        <?php echo $startTime ?>
    </div>
    <div id="curEndTime">
        <?php echo $curEndTime ?>
    </div>
    <div id="pageTotal">
        <?php echo $pageTotal ?>
    </div>
    <div id="survey_average_altitude">
        <?php echo $flightMission['survey_average_altitude']; ?>
    </div>
    <div id="flight_relative_altitude">
        <?php echo $flightMission['flight_relative_altitude'] ?>
    </div>
    <div id="flightMissionInfo">
        <?php echo $flightMissionInfo ?>
    </div>
    <div id="playType"><?php echo $playType; ?></div>
    <input type="hidden" id="socket" value="<?= $socket ?>">
    <input type="hidden" id="data_recorder_socket" value="<?= $recorderDataSocket ?>">
    <div id="correct_gps"><?= $needCorrect ?></div>
    <div id="planeWayCS"><?= $planeWayCS ?></div>
    <div id="locationCS"><?= $locationCS ?></div>
    <div id="recorderData"><?php echo $recorderData ?></div>
    <div id="video-play-path"><?php echo $videoPlayPath ?></div>
</div>
<!-- 视频播放窗口 -->
<div class="video-player" id="video-player" style="visibility:hidden">
    <div class="player-wrap" id="player-wrap">
        <div class="video-list">
            <div id="video-list-wrap"></div>
            <div class="video-list-btn"></div>
        </div>
        <div id="my-video" class="video-js"></div>
        <div class="player-bg"></div>
    </div>
    <div class="player-status-bar" id="player-status-bar">
        <div class="live-icon">
            <span class="live-status"></span>
            <div class="icon-1 icon"></div><div class="icon-2 icon"></div><div class="icon-3 icon"></div><div class="icon-4 icon"></div>
        </div>
        <div id="player-full-screen-icon"></div>
    </div>
    <div class="coor" id="coor"></div>
</div>


</body>
<script src="/js/baidu-statistics.js"></script>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/third-part/ckplayer/ckplayer.js"></script>
<script type="text/javascript" src="/js/vendor/common.js"></script>
<script type="text/javascript" src="/js/vendor/cmp-controls.js"></script>
{% include 'template/baseMap.volt' %}{% include 'template/baseMapKey.volt' %}
<script type="text/javascript" src="/js/vendor/transform.js"></script>
<script type="text/javascript" src="/js/vendor/google-map-manager.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-common.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-live.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-mobile-wing.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-mobile-detail.js"></script>
<script type="text/javascript" src="/js/vendor/cloudplay/cloud-play-data-recorder.js"></script>

<script>
    // 二维码
    function clickQrcodeBtn() {
        if ($(".qrcode-wrap").length > 0) {
            $(".qrcode-wrap").remove();
        } else {
            $("body").append("<div class='qrcode-wrap'> \
                <div id='qrcode'></div> \
                <p class='des'>扫码手机观看</p> \
            </div>");

            var url="http://"+"<?php echo $_SERVER['HTTP_HOST'] ?>"+"/monitor/detail4mobilePhone?local_id="+getQueryString("local_id");
            $('#qrcode').qrcode({
                render: "canvas",    // canvas方式
                width: 220,         // 宽度
                height: 220,        // 高度
                text: url           // 任意内容
            });
        }
    }
</script>
</html>







